<template>
  <view>
    <view class="scanCode_box">
      <camera class='camera' mode="scanCode" @error="cameraError" @scancode='scancode' frame-size='large' v-if="cameraType == 2">
        <!-- 					<cover-view class='animation' :animation="animation"></cover-view> -->
      </camera>
      <camera class='cameraOne' @error="cameraError" frame-size='large' v-if="cameraType == 1">
      </camera>
      <view class="top-main" @click="topMainFun">
        <image src="../../static/images/top.png" v-if="!topMain"></image>
        <image src="../../static/images/top1.png" v-else></image>
      </view>
      <view class="main-body">
        <view class="title-box">
          <view class="title" :class="cameraType==1?'main':''" @click="cameraTypeFun(1)">配料表解析</view>
          <view class="title" :class="cameraType==2?'main':''" @click="cameraTypeFun(2)">条形码扫描</view>
          <view class="main-img">
            <image src="../../static/images/img-main.png"></image>
          </view>
        </view>
        <view class="img-box">
          <view class="img left" @click="chooseImage()">
            <image src="../../static/images/img-2.png"></image>
          </view>
          <view class="submit" @click="submitFun()" v-if="check_search">
            <image src="../../static/images/img-3.png"></image>
          </view>
          <view class="img right" @click="toHistoricRecords()">
            <image src="../../static/images/img-1.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
let animation = uni.createAnimation({});
import { offTorch, onTorch } from '../../api/flashlight.js';
export default {
  name: 'HomeView',
  data() {
    return {
      animation: animation,
      timeFun: null,
      cameraType: 1,
      topMain: false,
      check_search: false
    }
  },
  onShow() {
    // this.donghua()
    this.check_search = uni.getStorageSync('check_search')
  },
  methods: {
    submitFun() {
      uni.navigateTo({
        url: '/pages/scans/ScanResult'
      })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function (res) {
          // 预览图片
        }
      });
    },
    cameraTypeFun(value) {
      if (value == 1) {
        this.cameraType = 1;
      } else {
        this.cameraType = 2;
      }
    },
    topMainFun() {
      if (this.topMain) {
        this.topMain = false
        offTorch()
      } else {
        this.topMain = true
        onTorch()
      }
    },
    donghua() {
      let that = this;
      let scode = true
      if (that.timeFun) clearInterval(that.timeFun)
      that.timeFun = setInterval(function () {
        if (scode) {
          animation.translateY(250).step({
            duration: 3000
          })
          scode = !scode;
        } else {
          animation.translateY(-10).step({
            duration: 3000
          })
          scode = !scode;
        }
        that.animation = animation.export()

      }.bind(that), 3000)
    },
    scancode(e) {
      innerAudioContext.play()
      // 扫描结果
      let res = e.detail.result
      console.log(res);
    },
    cameraError(e) {
      console.log(e)
    },
    toHistoricRecords() {
      uni.navigateTo({
        url: '/pages/scans/historicRecords'
      })
    }

  }

}
</script>
<style>
.scanCode_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #333;
  position: fixed;
  align-items: center;
  justify-content: space-around;
}
.camera {
  width: 433rpx;
  height: 434rpx;
  border-radius: 6rpx;
  margin: 30rpx;
  position: relative;
  top: -100rpx;
}
.cameraOne {
  width: 100%;
  height: 100%;
  position: relative;
}
.animation {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  width: 433rpx;
  height: 2rpx;
  background-color: #4cd964;
  border-radius: 50%;
}
.main-body {
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #00000060;
  z-index: 99;
  color: white;
  font-size: 30rpx;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  line-height: 80rpx;
  overflow: hidden;
}
.top-main {
  width: 46rpx;
  height: 56rpx;
  position: fixed;
  z-index: 99;
  left: 5vw;
  top: 100rpx;
}
.title-box {
  width: 100%;
  overflow: hidden;
  text-align: center;
  padding: 25rpx 0;
  border-bottom: solid 2rpx #f5f5f520;
  position: relative;
}
.main-img {
  width: 70rpx;
  height: 42rpx;
  position: absolute;
  right: 7.5%;
  top: 10rpx;
}
.title {
  width: 40%;
  display: inline-block;
  vertical-align: top;
  margin: 0 5%;
  color: #ffffff90;
}
.title.main {
  color: #ffffff;
  font-weight: 700;
}
.img-box {
  width: 84%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 68rpx 0;
}
.img-box .img {
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
  vertical-align: top;
}
.left {
  float: left;
}
.right {
  float: right;
}
.submit {
  position: absolute;
  width: 100rpx;
  height: 100rpx;
  left: calc(50% - 50rpx);
  top: 30rpx;
}
image {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
</style>
